<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <textarea id="content"></textarea>
</body>
<script>
    // 键盘相关的事件
    // onkeydown   按键按下时触发 (所有按键均可触发)
    // onkeyup     按键松开时触发 (所有按键均可触发)
    // onkeypress  按键按下并松开时触发 (按下时触发 => 文本输入相关的按键(数字 字母 标签符号 enter space)可以触发)

    // 如何绑定键盘事件?
    // 1. 绑定给文档 => 在页面中的任何位置按下均可触发
    // 2. 绑定给文本框 (input textarea) => 在文本框输入内容时触发

    // document.onkeydown = function(e){ // 形参 e evt event => 事件对象
    //     // e.key 按键对应的字符
    //     // e.code 按键对应的键盘符
    //     console.log("按键被按下",e.key,e.code);  
    // }

    // document.onkeyup = function(e){ // 形参 e evt event => 事件对象
    //     // e.key 按键对应的字符
    //     // e.code 按键对应的键盘符
    //     console.log("按键被松开",e.key,e.code);  
    // }

    // document.onkeypress = function(e){ // 形参 e evt event => 事件对象
    //     // e.key 按键对应的字符
    //     // e.code 按键对应的键盘符
    //     console.log("按键被按下",e.key,e.code);  
    // }

    //  2. 绑定给文本框 (input textarea) => 在文本框输入内容时触发
    var contentArea = document.getElementById("content");
    contentArea.onkeydown = function(e){
        console.log("按键被按下",e.key,e.code);  
    }


</script>
</html>